<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#tooltip{
  visibility: hidden;
  width: 0;
  height: 0;
  left: 0;
  top: 0;
  font-size: xx-small;
  position:absolute;
  background: #fff;
  border: solid thin #999;
  text-align:center;
  }
a{text-decoration:none;}
img {border:0px; display:block;}
td,th {
  border-bottom: thin dotted #999;
  border-right: thin dotted #999;
}
</style>
<script type="text/javascript">
var simpleEncoding = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

var width = 300;
var height = 300;
var pSize = 20;

var pL = [1.3, 1.5, 1.6, 4.3, 3.8, 3.3, 6.0, 5.8, 6.1];
var pW = [0.2, 0.3, 0.2, 1.3, 1.1, 1.0, 2.5, 1.8, 1.9];
var sL = [4.7, 5.1, 5.1, 6.4, 5.5, 5.0, 6.3, 6.7, 7.4];
var sW = [3.2, 3.8, 3.8, 2.9, 2.4, 2.3, 3.3, 2.5, 2.8];
var species = ['setosa', 'setosa', 'setosa', 'versicolor', 'versicolor', 'versicolor', 'virginica', 'virginica', 'virginica'];

var pLMx=6.1;
var pLMin=1.3;
var pWMx=2.5;
var pWMin=0.2;
var sLMx=7.4;
var sLMin=4.7;

var cSetosa = '#FFEDAF';
var cVirgin = '#D4FFBF';
var cVersic = '#CFFFFF';


function init(){
  var img = document.createElement('img');
  img.setAttribute('src', getURL());
  img.setAttribute('usemap', '#tooltipMap', 0);
  document.getElementById('img').appendChild(img);
  document.getElementById('img').appendChild(createMap());
  createTable();
}

function getURL(){
    // Google simple encoding representation. See:
    // http://code.google.com/apis/chart/docs/data_formats.html#encoding_data
    var pLE = simpleEncode(pL, pLMx);
    var pWE = simpleEncode(pW, pWMx);
    var sLE = simpleEncode(sL, sLMx);
    // &chxt=x,y&chxl=0:|1.4|2.5|6.4|1:|0.2|0.95|2.1&chtt=Iris+Data+Sample+Scatter+Plot&
    var url = 'http://chart.apis.google.com/chart?chs=300x300&cht=s&chm=' +
               pSize  +
               '&chxt=x,y&chxl=0:|0|2.5|6.4|1:|0|0.95|2.1&chtt=Iris+Data+Sample+Scatter+Plot&chd=s:';

return  url + pLE.join('') + "," + pWE.join('') + "," + sLE.join('');
    
}

// From google: http://code.google.com/apis/chart/docs/data_formats.html#encoding_data
function simpleEncode(valueArray,maxValue) {
var chartData = [];
  for (var i = 0; i < valueArray.length; i++) {
    var currentValue = valueArray[i];
    if (!isNaN(currentValue) && currentValue >= 0) {
    chartData.push(simpleEncoding.charAt(Math.round((simpleEncoding.length-1) * currentValue / maxValue)));
    }
      else {
      chartData.push('_');
      }
  }
return chartData;
}

function mapValue(max, min, value, factor) {
    return Math.max(1, Math.round(((value) / (max)) * factor));
}

function createMap(){
    var map = document.createElement('map');
    map.setAttribute('id', 'tooltipMap');
    map.setAttribute('name', 'tooltipMap');
    // for each point
    for (var i = 0; i < pL.length; i++){
  var area = document.createElement('area');
  area.setAttribute('id', '' + i);
  area.setAttribute('shape', 'circle');
  area.setAttribute('coords', 
    // these are offsets coming from the horizontal axis offset
    '' + (mapValue(pLMx, pLMin, pL[i], (width - 35)) + 30)
    // offsets from the title and the vertical axis offset
    + ',' + ((height - 52 - mapValue(pWMx, pWMin, pW[i], (height - 52))) + 33)
    + ',' + Math.round((mapValue(sLMx, sLMin, sL[i], pSize)/2)));
  area.setAttribute('href', 'javascript:highlight(' + i + ');');
  area.setAttribute('onmouseover', 'showTooltip(' + i + ');');
  area.setAttribute('onmouseout', 'hideTooltip();');
  area.setAttribute('alt', 'petal length: ' + pL[i] + ', petal width: ' 
    + pW[i] + ', sepal length: ' + sL[i]);
  map.appendChild(area);
    }
    return map;
}

function createTable(){
    var table = document.getElementById('dataTable');
    var oldTBody = document.getElementById('dataTbody');
    var newTBody = document.createElement('tbody');
    newTBody.id = 'dataTbody';
    var stub = document.createDocumentFragment();
    var trElem, tdElem, txtNode;
    for (var i = 0; i < pL.length; i++){
  // create row 
  trElem = document.createElement('tr');
  trElem.id = 't' + i;
  
  tdElem = document.createElement('td');
  txtNode = document.createTextNode(sL[i]);
  tdElem.appendChild(txtNode);
  trElem.appendChild(tdElem);

  tdElem = document.createElement('td');
  txtNode = document.createTextNode(sW[i]);
  tdElem.appendChild(txtNode);
  trElem.appendChild(tdElem);
  
  tdElem = document.createElement('td');
  txtNode = document.createTextNode(pL[i]);
  tdElem.appendChild(txtNode);
  trElem.appendChild(tdElem);
  
  tdElem = document.createElement('td');
  txtNode = document.createTextNode(pW[i]);
  tdElem.appendChild(txtNode);
  trElem.appendChild(tdElem);
  
  tdElem = document.createElement('td');
  txtNode = document.createTextNode(species[i]);
  tdElem.appendChild(txtNode);
  trElem.appendChild(tdElem); 
  
  stub.appendChild(trElem);
    }
    newTBody.appendChild(stub);
    table.replaceChild(newTBody, oldTBody);
}

function showTooltip(tid){
    // set the values
    document.getElementById('slVal').innerHTML = '' + sL[tid];
    document.getElementById('swVal').innerHTML = '' + sW[tid];
    document.getElementById('pwVal').innerHTML = '' + pW[tid];
    document.getElementById('plVal').innerHTML = '' + pL[tid];
    document.getElementById('species').innerHTML = '' + species[tid];
    var tooltip = document.getElementById('tooltip');
    tooltip.style.left=mapValue(pLMx, pLMin, pL[tid], (width - 35)) + 40 + 'px';
    tooltip.style.top=(height - mapValue(pWMx, pWMin, pW[tid], (height - 52))) + 10 + 'px';
    tooltip.style.width='auto'; //200px';
    tooltip.style.height='auto'; //'45px';
    if (tid < 3){
  tooltip.style.background=cSetosa;
    } else if (tid < 6){
  tooltip.style.background=cVirgin;
    } else {
  tooltip.style.background=cVersic;
    }
    tooltip.style.visibility='visible';
}

function hideTooltip(){
  document.getElementById('tooltip').style.visibility='hidden';
}

function highlight(tid){
    // clear highlight
    for(var i = 0; i < pL.length; i++){
  document.getElementById('t' + i).style.background='transparent';
    }
    var row = document.getElementById('t' + tid);
    if (tid < 3){
  row.style.background=cSetosa;
    } else if (tid < 6){
  row.style.background=cVirgin;
    } else {
  row.style.background=cVersic;
    }
}

</script>
</head>
<body id="root" onload="javascript:init()" >
<p>
<a href="http://informationandvisualization.de/blog/tooltips-google-chart-api">
  &lt;&lt; Back to article on informationandvisualization.de

</a>
</p>
<div id="tooltip">
  <table>
      <tr id="th">
      <th>Sepal Length</th>
      <th>Sepal Width</th>
      <th>Petal Width</th>
      <th>Petal Length</th>

      <th>Species</th>
      </tr>
      <tr>
      <td id="slVal">-1</td>
      <td id="swVal">-1</td>
      <td id="pwVal">-1</td>
      <td id="plVal">-1</td>

      <td id="species">-1</td>
      </tr>
  </table>
</div>
<div id="img">
</div>

<table id="dataTable">
<thead>
<tr>
<th>sepal length</th>
<th>sepal width</th>

<th>petal length</th>
<th>petal width</th>
<th>class</th>
</tr>
</thead>

<tbody id="dataTbody">
</tbody>
</table>
</body>
</html>
